<template>
  <div class="payment-config">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>支付配置</span>
          <el-button type="primary" @click="handleSave">保存配置</el-button>
        </div>
      </template>
      
      <el-form :model="configForm" :rules="rules" ref="configFormRef" label-width="120px">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="微信支付" name="wechat">
            <el-form-item label="AppID" prop="wechat.appId">
              <el-input v-model="configForm.wechat.appId" placeholder="请输入微信AppID" />
            </el-form-item>
            <el-form-item label="商户号" prop="wechat.mchId">
              <el-input v-model="configForm.wechat.mchId" placeholder="请输入商户号" />
            </el-form-item>
            <el-form-item label="API密钥" prop="wechat.apiKey">
              <el-input v-model="configForm.wechat.apiKey" type="password" placeholder="请输入API密钥" />
            </el-form-item>
            <el-form-item label="启用状态">
              <el-switch v-model="configForm.wechat.enabled" />
            </el-form-item>
          </el-tab-pane>
          
          <el-tab-pane label="支付宝" name="alipay">
            <el-form-item label="AppID" prop="alipay.appId">
              <el-input v-model="configForm.alipay.appId" placeholder="请输入支付宝AppID" />
            </el-form-item>
            <el-form-item label="商户私钥" prop="alipay.privateKey">
              <el-input v-model="configForm.alipay.privateKey" type="textarea" :rows="4" placeholder="请输入商户私钥" />
            </el-form-item>
            <el-form-item label="支付宝公钥" prop="alipay.publicKey">
              <el-input v-model="configForm.alipay.publicKey" type="textarea" :rows="4" placeholder="请输入支付宝公钥" />
            </el-form-item>
            <el-form-item label="启用状态">
              <el-switch v-model="configForm.alipay.enabled" />
            </el-form-item>
          </el-tab-pane>
          
          <el-tab-pane label="银联支付" name="unionpay">
            <el-form-item label="商户号" prop="unionpay.merId">
              <el-input v-model="configForm.unionpay.merId" placeholder="请输入商户号" />
            </el-form-item>
            <el-form-item label="证书路径" prop="unionpay.certPath">
              <el-input v-model="configForm.unionpay.certPath" placeholder="请输入证书路径" />
            </el-form-item>
            <el-form-item label="启用状态">
              <el-switch v-model="configForm.unionpay.enabled" />
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { showSuccess, showError } from '@/utils/message'

const activeTab = ref('wechat')
const configFormRef = ref()

const configForm = reactive({
  wechat: {
    appId: '',
    mchId: '',
    apiKey: '',
    enabled: false
  },
  alipay: {
    appId: '',
    privateKey: '',
    publicKey: '',
    enabled: false
  },
  unionpay: {
    merId: '',
    certPath: '',
    enabled: false
  }
})

const rules = {
  'wechat.appId': [{ required: true, message: '请输入微信AppID', trigger: 'blur' }],
  'wechat.mchId': [{ required: true, message: '请输入商户号', trigger: 'blur' }],
  'wechat.apiKey': [{ required: true, message: '请输入API密钥', trigger: 'blur' }],
  'alipay.appId': [{ required: true, message: '请输入支付宝AppID', trigger: 'blur' }],
  'alipay.privateKey': [{ required: true, message: '请输入商户私钥', trigger: 'blur' }],
  'alipay.publicKey': [{ required: true, message: '请输入支付宝公钥', trigger: 'blur' }],
  'unionpay.merId': [{ required: true, message: '请输入商户号', trigger: 'blur' }]
}

const handleSave = async () => {
  try {
    await configFormRef.value.validate()
    // 保存配置逻辑
    showSuccess('配置保存成功')
  } catch (error) {
    showError('请检查配置信息')
  }
}
</script>

<style scoped>
.payment-config {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 